<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div>
      <ul class="list">
        <li v-for="(item,index) in this.$store.state.state1.carts" :key="index">
          <img :src="item.imgsrc" alt=""/>
          <span>{{item.count}}</span>
          <button @click='deletefn(item.id)'>删除商品</button>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name:"about",
  methods:{
    deletefn(id){
      this.$store.dispatch("deleteCart",id)
    }
  },
  created(){
    this.$store.dispatch("getCarts")
  },
  mounted(){
    console.log(this)
  }
}
</script>
<style scoped>
ul,li{
  list-style:none;
  margin:0;
  padding: 0;
}
.list{
  display: flex;
}
</style>
